import React, { ChangeEvent } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import Avatar from "@material-ui/core/Avatar";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemAvatar from "@material-ui/core/ListItemAvatar";
import ListItemText from "@material-ui/core/ListItemText";
import DialogTitle from "@material-ui/core/DialogTitle";
import Dialog from "@material-ui/core/Dialog";
import PersonIcon from "@material-ui/icons/Person";
import AddIcon from "@material-ui/icons/Add";
import Typography from "@material-ui/core/Typography";
import { blue } from "@material-ui/core/colors";
import CloudUploadOutlinedIcon from "@material-ui/icons/CloudUploadOutlined";

const emails = ["username@gmail.com", "user02@gmail.com"];
const useStyles = makeStyles((theme) => ({
  root: {
    borderRadius: 20,
  },
  label: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    width: 400,
    height: 200,
    borderColor: theme.palette.primary.main,
    borderStyle: "dashed",
    cursor: "pointer",
  },
  input: {
    display: "none",
  },
  placeholderText: {
    marginLeft: 8,
    color: theme.palette.grey[500],
  },
}));

export interface SimpleUploadDialogProps {
  open: boolean;
  onClose: (file?: File) => void;
}

export default function SimpleUploadDialog(props: SimpleUploadDialogProps) {
  const classes = useStyles();
  const { onClose, open } = props;

  const handleClose = () => {
    onClose();
  };

  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
    if (event.target.files?.length) {
      onClose(event.target.files[0]);
    }
  };

  return (
    <Dialog
      className={classes.root}
      onClose={handleClose}
      aria-labelledby="simple-upload-dialog-title"
      open={open}
    >
      <label className={classes.label}>
        <input
          className={classes.input}
          type="file"
          accept="*.json"
          onChange={handleInputChange}
        ></input>
        <CloudUploadOutlinedIcon color="primary" fontSize="large" />
        <span className={classes.placeholderText}>上传资源文件</span>
      </label>
    </Dialog>
  );
}
